<template>
	<div class="left_nav left">
		<div class="item_title">
			<p>speedy管理平台</p>
		</div>
		<!--<hr />-->
		<ul class="nav_list" id="menu_list">
			<li v-for="(item,index) in dataList" key="index">
				<a @click="showNavs(index)" target="page" class="nav_bean">{{item.name}}</a>
				<ul class="navs" v-show="item.navsFlag">
					<li v-for="(items,indexs) in item.navs" key="indexs"><a @click="hrefs(items.path)" target="page">{{items.name}}</a></li>
				</ul>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: "app",
		data() {
			return {
				dataList: [{
					"name": "菜单122",
					"path": "#",
					"navsFlag": false,
					"navs": [{
						"name": "菜单11",
						"path": "/#/login"
					},{
						"name": "菜单12",
						"path": "/#/login"
					}]
				}, {
					"name": "菜单2222",
					"path": "#",
					"navsFlag": false,
					"navs": [{
						"name": "菜单21",
						"path": "/#/login"
					}]
				}]
			}
		},
		created() {
			this.init();
		},
		methods: {
			init(){
				this.http.post("/test",{},function(res){
					console.log("测试");
				});
			},
			hrefs(path) {
				this.$emit("update", path);
			},
			showNavs(index){
				let flag=this.dataList[index].navsFlag;
				if(flag){
					this.dataList[index].navsFlag=false;
				}else{
					this.dataList[index].navsFlag=true;
				}
			}
		}
	}
</script>

<style>
	.main {
		height: 95.5%;
		width: 90%;
	}

	.left_nav {
		background: #24262f;
		height: 100%;
		color: #ffffff;
		width: 10%;
	}

	.left_nav .item_title {
		display: block;
		background: #000000;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		line-height: 55px;
	}

	.left_nav ul{
		font-size: 16px;
	}
	.left_nav .nav_list{
		height: 100%;
		overflow: scroll;
	}
	.left_nav ul li {
		text-align: center;
	}
	.left_nav ul li a {
		display: block;
		color: #e1e1e1;
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-decoration: none;
	}

	.left_nav ul li .nav_bean {
		text-align: left;
		text-indent: 3em;
	}

	.left_nav .nav_list {
		margin-top: 10px
	}

	.left_nav ul li .navs {
		background: #1d1e26;
	}
</style>
